<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    width="90%"
    :maskClosable="false"
    :showOkBtn="true"
    :cancelText="'关闭'"
    :destroyOnClose="true"
    @close="closeCurrentDrawer"
    :contentWrapperStyle="{ overflowX: 'auto' }"
    class="overflow-x-auto"
    @ok="handleSubmit"
  >
    <Process :mode="1" @close-drawer="closeDrawer" @success="handleSuccess" ref="getTableInfo" />
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref, inject, defineAsyncComponent } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { removeScript, removeLink } from '/@/utils/utils';
  import { useMessage } from '/@/hooks/web/useMessage';

  export default defineComponent({
    name: 'ProcessSelectDrawer',
    components: {
      BasicDrawer,
      Process: defineAsyncComponent(() => import('./process.vue')),
    },
    emits: ['success', 'close'],
    setup(_, { emit }) {
      const getTitle = '选择流程';
      const type = ref<number>(2);
      const curFormUtil: any = inject('curFormUtil');
      const { createMessage } = useMessage();
      const getTableInfo = ref<any>(null);

      //初始化抽屉
      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner((data) => {
        setDrawerProps({ confirmLoading: false });
        type.value = data.type;
        console.log('processSelectDrawer type', type.value);
      });

      //成功回调
      function handleSuccess() {
        emit('success');
      }

      //显示详情抽屉
      function showView(record: object) {
        emit('showView', record);
      }

      //关闭抽屉
      let srcId = ref('-src');
      function closeCurrentDrawer() {
        // 因在菜单项设缓存后，在processHandleView中的onmounted中作curFormUtil.close处理会无效
        // curFormUtil.close();

        // emit('success');
        removeLink();
        removeScript(srcId.value);
      }

      async function handleSubmit() {
        let ids = getTableInfo.value.getSelectRowKeys();
        let rows = getTableInfo.value.getSelectRows();
        console.log('getTableInfo', ids);
        if (ids.length === 0) {
          createMessage.warning('请选择记录');
          return;
        }
        // let names = [] as any;
        // rows.forEach((item) => {
        //   names.push(item.name);
        // });
        let flowId = rows[0]['f.id'];
        console.log('rows==>', rows);
        emit('success', { flowId, title: rows[0]['f.title'] });
        emit('close');
        closeDrawer();
      }

      return {
        registerDrawer,
        closeDrawer,
        closeCurrentDrawer,
        handleSuccess,
        showView,
        getTitle,
        type,
        handleSubmit,
        getTableInfo,
      };
    },
  });
</script>
<style lang="less">
  .scrollbar > .scrollbar__bar.is-horizontal {
    display: block !important;
  }
</style>
